import {
  FC,
  useState,
  useEffect,
  ReactElement,
  memo,
  useCallback,
  useRef
} from 'react'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import { Modal, Table, Button, message } from 'antd'
import { connect, Dispatch, EvaluationStateType, WarnListType } from 'umi'
import AddWarningPage from '../add-warning'
import type { ColumnsType } from 'antd/es/table'
import styles from './index.less'
const { confirm } = Modal
interface IProps {
  code: string
  visible: boolean
  hide: () => any
  dispatch: Dispatch
  evaluationModel: EvaluationStateType
  update: () => any
  status: number
}

const WarningPage: FC<IProps> = ({
  code,
  visible,
  hide,
  dispatch,
  evaluationModel,
  update,
  status
}): ReactElement => {
  const columns: ColumnsType<WarnListType> = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      render: (_: string, record: WarnListType, index: number) => {
        return <span>{(index + 1).toString().padStart(2, '0')}</span>
      }
    },
    {
      title: '机构名称',
      dataIndex: 'unitName',
      align: 'center',
      key: 'unitName'
    },
    {
      title: '评价截止日期',
      dataIndex: 'content',
      align: 'center',
      key: 'content'
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_: string, { id }: { id: number }) => {
        return (
          <div>
            <Button
              type="primary"
              danger
              onClick={() => handleDel(id + '', code)}
              disabled={status == 4}
            >
              删除
            </Button>
          </div>
        )
      }
    }
  ]
  const [addShow, setAddShow] = useState<boolean>(false)
  const shouldUpdate = useRef<boolean>(false)
  const { warnList } = evaluationModel
  const handleOk = useCallback(() => {
    if (shouldUpdate.current) {
      update()
    }
    hide()
  }, [])

  const handleCancel = useCallback(() => {
    if (shouldUpdate.current) {
      update()
    }
    hide()
  }, [])

  // 新增评价预警
  const addWarning = useCallback(() => {
    setAddShow(true)
  }, [])

  // 删除评价预警
  const handleDel = useCallback((id: string, code: string) => {
    confirm({
      title: '删除',
      icon: <ExclamationCircleOutlined />,
      content: '确认删除该预警信息吗',
      onOk() {
        dispatch({
          type: 'evaluationModel/function_deleteBatchWarningInfo',
          payload: {
            id,
            code
          },
          callback: (response) => {
            if (response.code === 200) {
              message.success('删除成功')
              shouldUpdate.current = true
              getEvaluationWarn(code)
            }
          }
        })
      },
      onCancel() {
        console.log('Cancel')
      }
    })
  }, [])

  //   获取评价预警信息
  const getEvaluationWarn = useCallback((code: string) => {
    dispatch({
      type: 'evaluationModel/function_getBatchWarningInfo',
      payload: {
        code
      }
    })
  }, [])

  const handleUpdate = (): void => {
    shouldUpdate.current = true
    getEvaluationWarn(code)
  }

  useEffect(() => {
    if (!visible) return
    shouldUpdate.current = false
    getEvaluationWarn(code)
  }, [visible])
  return (
    <>
      <Modal
        title="预警信息"
        open={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        width="60%"
        okText="确认"
        cancelText="取消"
        maskClosable={false}
      >
        <div className={styles['table-header']}>
          <Button
            type="primary"
            onClick={() => addWarning()}
            disabled={status == 4}
          >
            新增预警
          </Button>
        </div>
        <div className={styles['table-wrapper']}>
          <Table dataSource={warnList} columns={columns} rowKey="id" />
        </div>

        {/* 新增评价预警 */}
        <AddWarningPage
          visible={addShow}
          hide={() => setAddShow(false)}
          code={code}
          update={() => handleUpdate()}
        />
      </Modal>
    </>
  )
}
const mapStateToProps = ({
  evaluationModel
}: {
  evaluationModel: EvaluationStateType
}) => {
  return {
    evaluationModel
  }
}

export default connect(mapStateToProps)(memo(WarningPage))
